<script setup>
import { computed, ref, watch } from 'vue';
import UploadFile from '@/components/UploadFile/UploadFile.vue'
import { message } from 'ant-design-vue';

import api from '@/api/index.js'

const emits = defineEmits(['close', 'reload'])
const props = defineProps({
    curRow: {
        type: Object,
        default: () => ({})
    },
    faMenuSltOpt: {
        type: Object,
        default: () => ({})
    },
})

// 弹窗标题
const title = computed(() => props.curRow.id ? '编辑数据' : '新增数据')
// 表单数据
const formData = ref({
    numPic: '',
    numtext: ''
})

// 同步表格数据到表单数据内
watch(() => props.faMenuSltOpt, (val) => {
    formData.value = { ...formData.value, ...val }
}, { deep: true, immediate: true })

// 是否显示弹窗
const show = ref(false);

// 提交按钮loading状态
const submitLoading = ref(false)

// 打开弹窗
const open = () => {
    show.value = true;
};
// 表单节点
const formRef = ref()
// 提交表单
const submit = async () => {
    try {
        submitLoading.value = true
        await api.editDpList({ configId: 1, configInfo: JSON.stringify(formData.value) })
        submitLoading.value = false
        show.value = false
        message.success('提交成功')
        emits('close')
        emits('reload')
    } catch (error) {
        submitLoading.value = false
        message.error('提交失败')
    }
}
defineExpose({ open })
</script>

<template>
    <a-drawer :maskClosable="false" :closable="false" destroyOnClose v-model:open="show" class="custom-class"
        root-class-name="root-class-name" :title="title" placement="right" @after-open-change="afterOpenChange">
        <a-form ref="formRef" :model="formData" layout="vertical" autocomplete="off" @finish="submit">
            <a-form-item label="图片" :rules="[{ required: true, message: '请上传' }]">
                <a-form-item-rest>
                    <UploadFile v-model="formData.numPic" :limit="1" />
                </a-form-item-rest>
            </a-form-item>
            <a-form-item label="文本内容">
                <a-textarea v-model:value="formData.numtext" :rows="8" />
            </a-form-item>
        </a-form>
        <template #footer>
            <div style="display: flex;gap: 5px;">
                <a-button type="primary" html-type="submit" @click="submit" :loading="submitLoading">提交</a-button>
                <a-button type="primary" ghost @click="show = false">取消</a-button>
            </div>
        </template>
    </a-drawer>
</template>
